// import style from './login.css';
import React from 'react';
import { Layout, Space, Card, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import styles from './login.css';
import { Link } from 'react-router-dom';
import http_utils from '@/utils/http_utils';

const { Password } = Input;
const { Footer } = Layout;
const titleContent = '我的兴趣爱好分享', titleDesc = '即时记录的学习笔记';

window.$http = http_utils;

export default class Login extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }

  _login() {
    window.$http.post('/auth', {
      username: this.state.username,
      password: this.state.password,
    }).then((res) => {
      if (res?.token) {
        if (!window.localStorage) {
          message.error('请更换浏览器');
        } else {
          window.localStorage['token'] = res.token;
          console.log(window.localStorage);
          this.props.history.push('/admin/manage');
        }
      }
    });
  }


  render() {

    return (
      <div className={styles.normal}>
        <Layout style={{ display: 'flex', height: '100%' }}>
          <div className={styles.title}>
            <h1 style={{ fontSize: 33, minHeight: 45, margin: '0 auto' }}>
              <Link to={'/'} style={{ color: 'white' }}>{titleContent}</Link>
            </h1>
            <h4 style={{ color: 'white', fontSize: 10, marginBottom: 0 }}>{titleDesc}</h4>
            {/*<Link style={{ position: 'absolute', color: 'white', fontSize: 25, top: 19, right: 25 }} to={'/search'}>*/}
            {/*  <SearchOutlined size={'small'}/></Link>*/}
          </div>

          <div style={{ backgroundColor: '#eee', flex: 1 }}>
            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
            <Card title={<h3 style={{ margin: 0 }}>登录</h3>}
                  style={{ width: 450, margin: '0 auto', marginTop: 60, borderRadius: 10 }}>

              <Space style={{ width: '100%' }} size={25} direction={'vertical'}>
                <Input size={'large'}
                       value={this.state.username}
                       onChange={(event) => {
                         this.setState({ username: event.target.value });
                       }}
                       placeholder={'用户名'}
                       prefix={<UserOutlined className="site-form-item-icon"/>}/>

                <Password size={'large'}
                          value={this.state.password}
                          onChange={(event) => {
                            this.setState({ password: event.target.value });
                          }}
                          placeholder={'密码'}
                          prefix={<LockOutlined className="site-form-item-icon"/>}/>

                <Button type="primary" style={{ width: '100%', marginBottom: 20 }} onClick={() => this._login()}
                        size={'large'}>
                  登录
                </Button>
              </Space>
            </Card>
          </div>

          <Footer style={{ textAlign: 'center' }}>
            <Space size={10}>
              <span>moyrn ©2020</span>
              <a href={'http://beian.miit.gov.cn/'}
                 style={{ color: 'rgba(0, 0, 0, 0.65)', textDecoration: 'underline' }}>湘ICP备17013168号-4</a>
            </Space>
          </Footer>
        </Layout>
      </div>
    );
  }
}
